<template>
    <div>
        <!-- 查询条件 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
            <el-form-item label="商品名称">
                <el-input v-model="formInline.title" placeholder="商品名称"></el-input>
            </el-form-item>
            <el-form-item label="商品条码">
                <el-input v-model="formInline.barCode" placeholder="商品条码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" plain @click="getCategory()">查询</el-button>
                <el-button type="warning" plain @click="resetForm()">重置</el-button>
                <el-button type="danger" plain @click="deleteProductCategory()">删除</el-button>
                <router-link to="/product_classify" class="btn-router" style="margin-left:10px;"><el-button type="success" plain>返回</el-button></router-link>
            </el-form-item>
        </el-form>

        <!--列表-->
        <el-table
                ref="multipleTable"
                :data="dataSource"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    label="全选"
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="商品名称">
            </el-table-column>
            <el-table-column
                    prop="barCode"
                    label="商品条码">
            </el-table-column>
            <el-table-column
                    prop="spec"
                    label="商品规格"
                    show-overflow-tooltip>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination
                    background
                    layout="prev, pager, next" :page-size="page_size"
                    :total="total"
                    @current-change="handleCurrentChange"
                    style="float:right;">
            </el-pagination>
        </el-col>

    </div>
</template>
<script>
  import * as api from '../../../api/enjoylove_api'

  export default {
    data () {
      return {
        listLoading: false,
        page: 1,
        total: 0,
        page_size: 10,

        formInline: {
          title: '',
          barCode: ''
        },

        dataSource: [],
        multipleSelection: []
      }
    },
    methods: {
      handleCurrentChange(val) {
        this.page = val;
        this.getCategory();
      },
      //获取商品列表信息
      getCategory () {
        let para = {
          page: this.page,
          categoryId: this.$store.state.category.id,
          title: '' || this.formInline.title,
          barCode: '' || this.formInline.barCode
        };
        this.listLoading = true;

        api.productCategoryList(para).then((res) => {
          let datas = JSON.parse(res.data);
          if(!datas.status){
            if(datas.success){
              //成功
              this.total = datas.data.products.totalElements;
              this.dataSource = datas.data.products.content;
              this.listLoading = false;
            }else {
              this.$message.error(datas.message);
            }
          }else{
            if(datas.status == 401){
              this.$router.push('/login');
            }
            this.$message(res.data.msg);
          }
        });
      },

      //重置商品列表信息
      resetForm() {
        this.formInline = {
          title: '',
          barCode: ''
        }
        this.getCategory ()
      },

      //删除商品
      deleteProductCategory () {
        this.$confirm('此操作将此分类里删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let oldArr = this.multipleSelection
          let newArr = []

          oldArr.forEach((key,val) => {
            newArr.push(key.id)
          })

          let para = {
            ids: newArr.toString()
          };

          api.deleteProductCategory(para).then((res) => {
            let datas = JSON.parse(res.data);
            if(!datas.status){
              if (datas.success) {
                this.getCategory()
                this.$message.success('删除成功!')
              }else {
                this.$message.error(datas.message)
              }
            }else{
              if(datas.status == 401){
                this.$router.push('/login');
              }
              this.$message(res.data.msg);
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    },
    mounted() {
      this.$nextTick(() => this.getCategory())
    }
  };
</script>
